<!--
 * @Descripttion: 生成二维码组件
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年12月20日14:22:20
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<img ref="img" />
</template>

<script>
import QRcode from "qrcodejs2-fix";

export default {
	props: {
		text: { type: String, required: true, default: "" },
		size: { type: Number, default: 100 },
		logo: { type: String, default: "" },
		logoSize: { type: Number, default: 30 },
		logoPadding: { type: Number, default: 5 },
		colorDark: { type: String, default: "#000000" },
		colorLight: { type: String, default: "#ffffff" },
		correctLevel: { type: Number, default: 2 },
	},
	data() {
		return {
			qrcode: null,
		};
	},
	watch: {
		text() {
			this.draw();
		},
	},
	mounted() {
		this.draw();
	},
	methods: {
		//创建原始二维码DOM
		async create() {
			return new Promise((resolve) => {
				var element = document.createElement("div");
				new QRcode(element, {
					text: this.text,
					width: this.size,
					height: this.size,
					colorDark: this.colorDark,
					colorLight: this.colorLight,
					correctLevel: this.correctLevel,
				});
				if (element.getElementsByTagName("canvas")[0]) {
					this.qrcode = element;
					resolve();
				}
			});
		},
		//绘制LOGO
		async drawLogo() {
			return new Promise((resolve) => {
				var logo = new Image();
				logo.src = this.logo;
				const logoPos = (this.size - this.logoSize) / 2;
				const rectSize = this.logoSize + this.logoPadding;
				const rectPos = (this.size - rectSize) / 2;
				var ctx = this.qrcode
					.getElementsByTagName("canvas")[0]
					.getContext("2d");
				logo.onload = () => {
					ctx.fillRect(rectPos, rectPos, rectSize, rectSize);
					ctx.drawImage(
						logo,
						logoPos,
						logoPos,
						this.logoSize,
						this.logoSize,
					);
					resolve();
				};
			});
		},
		async draw() {
			await this.create();
			if (this.logo) {
				await this.drawLogo();
			}
			this.$refs.img.src = this.qrcode
				.getElementsByTagName("canvas")[0]
				.toDataURL("image/png");
		},
	},
};
</script>

<style></style>
